<!doctype html>
<html>  
<head>
<meta charset="utf-8">
<script>  
window.onload = function() {  
	draw();  
	var saveButton = document.getElementById("saveImageBtn");  
	bindButtonEvent(saveButton, "click", saveImageInfo);  
	var dlButton = document.getElementById("downloadImageBtn");  
	bindButtonEvent(dlButton, "click", saveAsLocalImage);  
};  
function draw(){  
	var canvas = document.getElementById("thecanvas");  
	var ctx = canvas.getContext("2d");  
	ctx.fillStyle = "rgba(125, 46, 138, 0.5)";  
	ctx.fillRect(25,25,100,100);   
	ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";  
	ctx.fillRect(58, 74, 125, 100);  
	ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color  
}  
  
function bindButtonEvent(element, type, handler){  
	if(element.addEventListener) {  
		element.addEventListener(type, handler, false);  
	} else {  
		element.attachEvent('on'+type, handler);  
	}  
}  
  
function saveImageInfo(){  
	var mycanvas = document.getElementById("thecanvas");  
	var image    = mycanvas.toDataURL("image/png");  
	var w=window.open('about:blank','image from canvas');  
	w.document.write("<img src='"+image+"' alt='from canvas'/>");  
}  
function saveAsLocalImage(){  
	var myCanvas = document.getElementById("thecanvas");  
	// here is the most important part because if you dont replace you will get a DOM 18 exception.  
	// var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");  
	var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");   
	window.location.href=image; // it will save locally  
}  
</script>  
</head>  
<body>  
<canvas width="200" height="200" id="thecanvas"></canvas>  
<button id="saveImageBtn">保存图像</button>  
<button id="downloadImageBtn">下载图像</button>  

</body>  
</html>   
